<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-03-28 15:54:42
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-12 16:45:43
 * @FilePath: /tea-garden-web/src/pages/manager-farmland.vue
 * @Description: 管理-地块
-->
<template>
  <div class="manager-farmland">
    <div class="top-area">
      <i class="icon-button-back" @click="$router.push({ name: 'baseOverview' })" />
      <span class="page-name">地块管理</span>
    </div>
    <div class="content-area">
      <el-skeleton :loading="loading.allFarmLand" animated>
        <template #template>
          <el-row class="table-header">
            <el-col :span="8">地块ID</el-col>
            <el-col :span="8">地块编号</el-col>
            <el-col :span="8">种植品种</el-col>
          </el-row>
          <el-skeleton-item class="table-row" variant="text" v-for="index in 8" :key="index"></el-skeleton-item>
        </template>
        <template #default v-if="allFarmLand.length === 0">
          <section style="width: 100%; margin-top: 40px; text-align: center; color: #333333;">暂无地块信息</section>
        </template>
        <template #default v-else-if="allFarmLand.length > 0">
          <el-row class="table-header">
            <el-col :span="8">地块ID</el-col>
            <el-col :span="8">地块编号</el-col>
            <el-col :span="8">种植品种</el-col>
          </el-row>
          <el-row class="table-row" v-for="(item, index) in allFarmLand" :key="index">
            <el-col class="row-name" :span="8">{{ item.id }}</el-col>
            <el-col class="row-name" :span="8">{{ item.massif_num }}</el-col>
            <el-col class="row-name" :span="8">{{ item.massif_name }}</el-col>
          </el-row>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('base-overview', ['loading', 'allFarmLand'])
  },
  methods: {
    ...mapActions('base-overview', ['getAllFarmLand'])
  },
  created () {
    this.getAllFarmLand()
  }
}
</script>

<style lang="scss">
.manager-farmland {
  height: 100%;
  background: #eff7f8;
  position: relative;

  .top-area {
    position: relative;

    .icon-button-back {
      cursor: pointer;
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-back-03.png");
      background-size: cover;
      position: absolute;
      left: 27px;
      top: 30.5px;
    }

    .page-name {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #089bab;
      height: 25px;
      width: 100px;
      text-align: center;
      position: absolute;
      left: 52px;
      top: 27px;
    }
  }

  .content-area {
    width: calc(100% - 20px);
    height: 620px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 1px rgba(120, 146, 141, 0.12);
    border-radius: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 16px;
    overflow-y: auto;

    .table-header {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
    }

    .table-row {
      line-height: 53.5px;
      border-bottom: 1px solid #f1f2f4;
      position: relative;

      .row-name {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089bab;
        display: inline-block;
      }
    }
  }
}
</style>
